<template>
    <IIView v-model="defaultValue"  :loading="loading">
        <Card :dis-hover="false">
            <h3>产品[{{data.name}}]详情页面</h3>
        </Card>
        <Row :gutter="20">
            <Col :span="6">
                <Card title="标签" icon="ios-options" bordered :padding="0">
                    <CellGroup @on-click="cellGroupClick">
                        <Cell title="基础信息" label="Basic Information" :selected="showCell === 'basic'" name="basic"/>
                        <Cell title="日志信息" label="Logs Information" :selected="showCell === 'logs'" name="logs"/>
                        <Cell title="库存信息" label="Inventory Information" :selected="showCell === 'inventory'" name="inventory"/>
                        <Cell title="批次库存" label="Batch Information" :selected="showCell === 'batch'" name="batch"/>
                        <Cell title="订单信息" label="Orders Information" :selected="showCell === 'orders'" name="orders"/>
                    </CellGroup>
                </Card>
            </Col>
            <Col :span="18" v-show="showCell === 'basic'">
                <Card bordered icon="md-aperture" title="基础信息">
                    <Row>
                        <ItemCol :span="6">
                            <template slot="title">产品料号:</template>
                            {{data.unique}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">产品SKU:</template>
                            {{data.sku}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">默认条码:</template>
                            {{data.barcode}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">产品名称:</template>
                            {{data.name}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">产品净重:</template>
                            {{data.net_weight}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">产品毛重:</template>
                            {{data.weight}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">品牌:</template>
                            {{data.brand}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">型号:</template>
                            {{data.model}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">规格:</template>
                            {{data.specs}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">功能:</template>
                            {{data.function}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">用途:</template>
                            {{data.use}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">成分:</template>
                            {{data.ingredient}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">海关编码:</template>
                            {{data.hs_code}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">原产国:</template>
                            <RemoteSpan url="common/select/country" v-model="data.country" show-code></RemoteSpan>
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">申报单位:</template>
                            <RemoteSpan url="common/select/unit" v-model="data.unit" show-code></RemoteSpan>
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">申报币种:</template>
                            <RemoteSpan url="common/select/currency" v-model="data.currency" show-code></RemoteSpan>
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">法一数量:</template>
                            {{data.qy1}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">法二数量:</template>
                            {{data.qy1}}
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">产品状态:</template>
                            <span v-if="data.status === 0">草稿</span>
                            <span v-if="data.status === 1">审核</span>
                            <span v-if="data.status === 2">异常</span>
                            <span v-if="data.status === 3">正常</span>
                            <span v-if="data.status === 4">锁定</span>
                        </ItemCol>
                        <ItemCol :span="6">
                            <template slot="title">产品图片:</template>
                            <Button type="text" v-if="data.images.length > 0" size="small" @click="openComponent('ModalCarousel', {lists: data.images})">查看图片</Button>
                            <Button type="text" v-else size="small">暂无图片</Button>
                        </ItemCol>
                        <ItemCol :span="24">
                            <template slot="title">申报要素:</template>
                            {{data.element}}
                        </ItemCol>
                    </Row>
                </Card>
            </Col>
            <Col :span="18" v-show="showCell === 'logs'">
                <Card bordered icon="md-aperture" title="日志信息">
                    <ILogs v-model="data.logs"></ILogs>
                </Card>
            </Col>
            <Col :span="18" v-show="showCell === 'inventory'">
                <Card bordered icon="md-aperture" title="库存信息">
                </Card>
            </Col>
            <Col :span="18" v-show="showCell === 'batch'">
                <Card bordered icon="md-aperture" title="批次库存">
                </Card>
            </Col>
            <Col :span="18" v-show="showCell === 'orders'">
                <Card bordered icon="md-aperture" title="订单信息">
                </Card>
            </Col>
        </Row>

        <component v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value"
                   :props="componentProps.props"></component>
    </IIView>
</template>

<script>
    import IIView from "../../../../components/layout/IIView";
    import IViewMixins from "../../../../mixins/iViewMixins";
    import ItemCol from "../../../../components/layout/ItemCol";
    import RemoteSpan from "../../../../components/layout/RemoteSpan";
    import ILogs from "../../../../components/layout/ILogs";

    export default {
        name: "II11View",
        components: {ModalCarousel : () => import('../../../../components/layout/ModalCarousel'),
            ILogs, RemoteSpan, ItemCol, IIView},
        mixins: [IViewMixins],
        data() {
            return {
                showCell: 'basic',
                data: {images: []}
            }
        },
        methods: {
            getData(){
                this.loading = true;
                this.$http.get(`product/index/${this.props.id}`).then((res) => {
                    this.data = res;
                }).finally(() => this.loading = false)
            },
            cellGroupClick(name) {
                this.showCell = name;
            }
        }
    }
</script>

<style scoped>
    .ivu-card {
        margin-bottom: 15px;
    }
</style>
